<style type="text/css">
  .badge-group{
    position: absolute;
    color: white;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FF0000;
    line-height: 18px;
    text-align: center;
    top: 5px;
    text-align: center;
    left: 80px;
  }
  .post-content {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.7;
    top:30px;
    left:33px;
    position: absolute;
  }
</style>

<ion-view title="群({{groups.length}})">
  <ion-nav-buttons side="right">
    <button  ng-if="userType == '1'" class="button no-animation button-icon icon ion-android-add" ng-click="modal.show()">
    </button>
  </ion-nav-buttons>
  <ion-content overflow-scroll="true" padding="false" class="has-header">
    <ion-refresher
      pulling-text="下拉刷新..."
      on-refresh="doRefresh()">
    </ion-refresher>

    <div ng-show="groups.length ==0">
      <img src="img/nodatatable.png" class="center" style="margin-top: 170px">
      <h4 align="center" style="margin-top: 30px">您还没有群</h4>
    </div>

    <ion-list>
      <ion-item class=" item-thumbnail-left item-icon-right  "
                ng-repeat="group in groups"
                ng-click="toChat(group)" >
        <img>
        <div class="caption post-content">
           <h1>{{group.avatarLabel}}</h1>
        </div>
        <span class="badge-group" ng-if="group.offlineMessageCount >0">{{group.offlineMessageCount}}</span>
        <h2 style="margin-top: 15px">{{group.name}}</h2>
        <p style="margin-top: 15px"  >{{group.description}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <div ng-switch on="group.groupRole">
          <div ng-switch-when="1">
            <ion-option-button class="button-assertive" ng-click="remove(group)">
              &nbsp;&nbsp; &nbsp;&nbsp;解散&nbsp;&nbsp;&nbsp;&nbsp;
            </ion-option-button>
          </div>
          <div ng-switch-default>
            <ion-option-button class="button-assertive" ng-click="exitGroup(group)">
              &nbsp;&nbsp; &nbsp;&nbsp;退出&nbsp;&nbsp;&nbsp;&nbsp;
            </ion-option-button>
          </div>
        </div>



      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
